<template>
  <div id="head">
    <span v-if="isShow" @click="showaside">
      <i class="iconfont icon-caidan"></i>
    </span>
    Wd-Ui
  </div>
</template>

<script>

export default {
  name: 'Head',
  methods: {
    _isMobile () {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag
    },
    showaside () {
      window.alert('移动端是适配还没完成，现在仅支持PC端')
    }
  },
  created () {
    if (this._isMobile() == null) {
      this.isShow = false
    } else {
      this.isShow = true
    }
  }
}
</script>
<style scoped>
  #head {
    width: 100%;
    height: 1.25rem;
    background-color: #698ff5;
    line-height: 1.25rem;
    color: #fff;
    font-size: .75rem;
    text-indent: 1rem;
  }
  #head > span > i {
    font-size: 50px;
    color: gray;
    text-align: left;
  }
</style>
